<style type="text/css">
table tr.persona td {
	color: #360;
	text-decoration:none;
	font-weight:bold;
	border-bottom:1px dotted #CCC;
	background-color:#E5E5E5;
}
table.tablada {
	font-size:12px;
	border-collapse:collapse;
	border:1px solid #999;
}
table.tablada caption {
	font-weight:bold;
	padding:3px;
	color:white;
	background-color: #627AAD;	
}
table.tablada tr th {
	font-weight:bold;
	font-size:12px;	
	padding:3px;
	background-color: #A8CFFF;
	border-bottom:1px solid #CCC;
}
table.tablada tr td, table.tablada tr.hover td {
	padding-left:5px;
	padding-right:5px;
	padding-bottom:3px;
}
table.tablada tr.hover td {
	background-color: #ECF1FF;	
}
table.tablada tr.total td {
	background-color:#FFFFCC;
	border-top:1px solid #999;
	padding-top:5px;
}
table.tablada tr td a {
	color:#2A358F;
	font-weight:bold;
	text-decoration:none;	
}

</style>
<script type="text/javascript">
$(function() {
	$(".tablada tr").hover(function() {
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	});
});
</script>
<!-- START BLOCK : DISPLAYCLASE -->
<fieldset>
<legend class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">Informaci&oacute;n de la Clase</legend>
<table class="tablada" style="border:1px solid black;">
<tr>
  <th>Fecha</th>
  <th>Clase</th>
<th>Profesor</th>
<th>Comentarios</th>
<th>PIN</th>
</tr>
<tr>
  <td style="font-weight:bold; padding:10px;">{fecha_clase}</td>
  <td style="font-weight:bold; padding:10px;">{descripcion_clase}</td>
  <td style="font-weight:bold"><a href="ver_perfil_alumno.php?ida={id_persona}" class="boton">{nombre_persona}</a></td>
  <td style="font-weight:bold">{comentarios}</td>
  <td style="font-weight:bold">{pin_clase}</td>
</tr>
</table>
</fieldset>
<!-- END BLOCK : DISPLAYCLASE -->
<!-- START BLOCK : FORMULARIOAGREGAR -->
<fieldset>
<legend class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">Informacion de la clase</legend>
<form action="clases_editar.php" method="post" id="frmclase">
<table>
<tr>
  <td>&nbsp;</td>
<td><strong>Titulo</strong></td>
<td><strong>Fecha</strong></td>
<td><!--strong>Comienzo</strong-->&nbsp;</td>
<td>&nbsp;<!--Fin--></td>
</tr>
<tr>
  <td>&nbsp;</td>
<td><input type="text" name="descripcion_clase" size="30" maxlength="100" value="{descripcion_clase}" /></td>
<td><input type="text" name="fecha_clase" style="text-align:center" size="10" maxlength="10" value="{fecha_clase}" id="fecha_clase" /></td>
<td>&nbsp;<!--{hora_comienzo}--></td>
<td>&nbsp;<!--{hora_fin}--></td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><strong>Instituto</strong></td>
  <td>{comboinstitutos}</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><strong>Materia</strong></td>
  <td>{combomaterias}</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<!--tr>
  <td>&nbsp;</td>
  <td><strong>Cupo Maximo de Personas</strong></td>
  <td><input type="text" name="cupo_maximo" style="text-align:right" size="10" maxlength="10" value="{cupo_maximo}" id="cupo_maximo" /></td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><strong>Costo por hora</strong></td>
  <td><input type="text" name="costo_por_hora" style="text-align:right" size="10" maxlength="10" value="{costo_por_hora}" id="costo_por_hora" />
    Bsf</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr-->
<tr>
  <td>&nbsp;</td>
  <td><strong>Lugar</strong></td>
  <td colspan="2">{combolugares}</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td colspan="5">&nbsp;</td>
</tr>
<tr>
  <td colspan="5">Comentarios</td>
</tr>
<tr>
  <td colspan="5"><textarea cols="36" rows="2" placeholder="Comentarios de la clase..." name="comentarios">{comentarios}</textarea></td>
  </tr>
</table>
<br>
<br>
<input type="submit" class="boton" id="btn_aceptar" value="Guardar">
<a class="boton" id="btn_cancelar" href="main.php">Cancelar</a>
<a id="ver_asistentes" class="boton" href="clases_ver.php?idc={id_clase}">Asistentes</a>
<input type="hidden" name="id_clase" value="{id_clase}">
<input type="hidden" name="accion" value="agregar">
</form>
<script type="text/javascript">
$(function() {
	$("#fecha_clase").datepicker();
	if($("input[name='id_clase']").val()=="0") {
		$("#ver_asistentes").hide();
	}
	$("input[name='descripcion_clase']").focus();
	$("#cmb_id_instituto").jCombo("./servicios/getInstitutos.php?id=", { selected_value : '{id_instituto}' } );
    $("#cmb_id_materia").jCombo("./servicios/getMaterias.php?id=", { 
		parent: "#cmb_id_instituto", 
		parent_value: '{id_instituto}', 
		selected_value: '{id_materia}' 
	});		
});
</script>
</fieldset>
<!-- END BLOCK : FORMULARIOAGREGAR -->
<!-- START BLOCK : FORMULARIOBUSQUEDA -->
<fieldset class="ui-widget">
<legend class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">Busqueda de clases</legend>
<form method="post" id="fbusqueda" action="{self}">
<input type="text" id="txt_texto" name="texto" value="{texto}" />
{profesor}&nbsp;{estatuses}
<input type="submit" id="btn_buscar" class="boton" value="Buscar">
&nbsp;<a class="boton" id="btn_agregar" href="clases_editar.php">Agregar una clase</a>
</form>
</fieldset>
<script type="text/javascript">
$(function() { 
	$("#txt_texto").focus().select();
});
</script>
<!-- END BLOCK : FORMULARIOBUSQUEDA -->
<!-- START BLOCK : CLASELISTADO -->
<br />
<br clear="all" />
<table class="full" cellpadding="0" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Clase</th>
<th>Fecha</th>
<th>Estatus</th>
<th>Comentarios</th>
</tr>
</thead>
<tbody>
<!-- START BLOCK : CLASEFILA -->
<tr>
<td><a href="clases_ver.php?idc={id_clase}">&nbsp;{descripcion_clase}</a></td>
<td>{fecha_clase}</td>
<td><span style="color:{color}; font-weight:bold;">{estatus}</span></td>
<td>&nbsp;{comentarios}</td>
</tr>
<!-- END BLOCK : CLASEFILA -->
</tbody>
</table>
<script type="text/javascript">
$(function() {
	$(".eliminar").click(function() {
		return confirm("Desea eliminar esta clase?");
	});
});
</script>
<br />
<br />
<!-- END BLOCK : CLASELISTADO -->
<!-- START BLOCK : AGREGARALUMNO -->
<fieldset>
<legend class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">Clase de {nombre_persona}</legend>
<h3>{descripcion_clase}</h3>
<div style="font-weight:bold; color:{color};">{estatus}</div>
<div style="font-size:10px">{fecha_clase} - de {hora_comienzo} a {hora_fin}<br />
{comentarios} <a style="color:#2A358F" href="clases_editar.php?idc={id_clase}">[Editar esta clase]</a><br />
</div><br />
<form method="post" action="{self}" id="frminsertar">
<input type="hidden" value="0" id="id_alumno_sel" name="id_alumno" />
<input type="hidden" value="{id_clase}" name="id_clase" />
<input type="hidden" name="accion" value="ag_alumno" />
<table class="tablada">
<tr>
  <th>alumno</th>
  <th style="text-align:center">comentarios</th>
  <th style="text-align:center">horas</th>
  <th colspan="2">monto/hora</th>
  <th>abonado</th>
  <th>total</th>
  <th>saldo</th>
  <th>&nbsp;</th>
  </tr>
<!-- START BLOCK : PERSONAITEM -->
<tr class="persona">
  <td>&nbsp;<a href="ver_perfil_alumno.php?ida={id_persona}">{nombre_persona}</a></td>
  <td>{comentario}</td>
  <td style="text-align:center">{horas}</td>
  <td style="text-align:right">{monto}</td>
  <td>&nbsp;</td>
  <td style="text-align:right">{abonado}</td>
  <td style="text-align:right">{montototal}</td>
  <td style="text-align:right">{saldo}</td>
  <td style="text-align:center">&nbsp;
  <!-- START BLOCK : ENLACE -->
  <a href="clases_ver.php?idc={id_clase}&ida={id_alumno}&accion=eliminar_item" class="eliminar" style="color:#2A358F; font-size:12px">Quitar de la lista</a>
  <!-- END BLOCK : ENLACE -->
  </td>
  </tr>
<!-- END BLOCK : PERSONAITEM -->
<!-- START BLOCK : PERSONATOTAL -->
<tr class="persona">
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>Total</td>
  <td style="text-align:right; color:black;">{total_abonado}</td>
  <td style="text-align:right; color:black;">{total}</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<!-- END BLOCK : PERSONATOTAL -->
<!-- START BLOCK : AGALUMNO -->
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td><input type="text" placeholder="Nombre de la Persona" name="txtbuscar" id="txtbuscar" size="30" /></td>
  <td colspan="2" style="text-align:center"><input type="text" placeholder="Comentarios..." name="comentario" size="30" /></td>
  <td style="text-align:center"><select name="horas">
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select></td>
  <td><span style="text-align:center">
    <input type="text" size="5"name="monto" value="{session_monto}" style="text-align:right" />
  </span></td>
  <td><a style="color:#2A358F; text-decoration:none; font-size:22px;" href="javascript:void(0);" id="pago_rapido">&nbsp;=&gt;&nbsp;</a></td>
  <td><input type="text" size="5" name="monto_inmediato" value="0" style="text-align:right" /></td>
  <td><span style="text-align:center">
    <input type="submit" id="btn_insertaral" value="Registrar" class="boton" />
  </span></td>
  <td>&nbsp;</td>
  </tr>
<!-- END BLOCK : AGALUMNO -->
</table>
<!-- START BLOCK : BOTONSALVAR -->
<br />
<br />
<a href="clases_ver.php?idc={id_clase}&accion=salvar_cambios" class="salvar boton">Facturar Clase</a>&nbsp;
<a href="clases_ver.php?idc={id_clase}&accion=eliminar_clase" class="eliminartodo boton">Eliminar/Anular la Clase</a>&nbsp;
<a href="main.php" class="boton">Cancelar</a>&nbsp;
<a href="#" id="btn_agregar_alumno">Agregar un nuevo alumno</a>
<!-- END BLOCK : BOTONSALVAR -->
</form>
</fieldset>
<script type="text/javascript">
$(function() {
	$(".salvar").click(function() {
		return confirm("Desea facturar la clase ?\n\n(esta operacion es irreversible)");
	});
	$("#pago_rapido").click(function() {
		$monto = parseInt($("input[name='monto']").val());
		$horas = parseInt($("select[name='horas']").val());
		$("input[name='monto_inmediato']").val($monto*$horas + '');
		return false;
	});
	$("#txtbuscar").autocomplete({
        source: "servicios/getNombres.php",
        delay: 200,
        select: function(event, ui) {
            if(ui.item.id!="0") $("#id_alumno_sel").val(ui.item.id);
        }
      }); 
	$("#txtbuscar").focus();
	$("#frminsertar").submit(function() {
		if($("#txtbuscar").val().esVacio()) {
			alert("El nombre de la persona no puede ser vacio");
			$("#txtbuscar").focus();
			return false;
		};
	});
	$(".eliminar").click(function() {
		return confirm("Desea eliminar este alumno?");
	});
	$(".eliminartodo").click(function() {
		return confirm("Esta operacion anula todos los datos de esta clase\nDesea continuar?");
	});
});
</script>
<div id="dialog-form" title="Agregar un alumno">	
	<form id="alumno_form">
	<fieldset>    	
		<label for="nombre_persona">Nombre</label><br />
		<input type="text" name="nombre_persona" size="30" maxlength="50" id="id_nombre_persona" class="text ui-widget-content ui-corner-all" /><br />
		<label for="email">Email</label><br />
		<input type="text" size="30" name="email" id="id_email" value="" class="text ui-widget-content ui-corner-all" /><br />
        <label for="nick">Nick</label><br />
	  <input type="text" size="30" name="nick" id="id_nick" value="" class="text ui-widget-content ui-corner-all" /><br />
		<label for="ci">CI</label><br />
		<input type="text" maxlength="10" name="ci" id="id_ci" value="" class="text ui-widget-content ui-corner-all" /><br />
        <label for="id_instituto">Instituto</label><br />
		{comboinstitutos}
	</fieldset>
    <div style="text-align:center; padding:10px; font-size:10px; font-weight:bold">
    &nbsp;
    <span id="f_error" style="color:red"></span>
    <span id="f_mensaje" style="color:green"></span>
    </div>
	</form>
</div>
<script type="text/javascript">
$(function() {
	$("#btn_agregar_alumno").button().click(function() {
		$("#alumno_form input").each(function() {
			$(this).val("");
		});
		$("#alumno_form select").each(function() {
            $(this).val("0");
        });
		$("#f_error").html("");
		$("#f_mensaje").html("");
		$("#dialog-form").dialog("open");
	});
	$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 350,
			width: 400,
			modal: true,
			buttons: {
				"Agregar Alumno": function() {
					$.ajax({
					  type: 'POST',
					  url: "servicios/setPersona.php",
					  data: { 	"accion": "agregar_persona",
					  			"nombre_persona":$("#id_nombre_persona").val(),
					  			"email": $("#id_email").val(),
								"ci": $("#id_ci").val(),
								"nick": $("#id_nick").val()				  
					  } ,
					  success: function(response) {
						 if(response.error=="1") {		
						  	 $("#f_mensaje").html("");						 
							 $("#f_error").html(response.data).hide().show("fast");
						 } else {
							 $("#id_alumno_sel").val(response.data.id_persona);
							 $("#txtbuscar").val(response.data.nombre_persona);
							 $("#dialog-form").dialog("close");
						 }
					  },
					  dataType: "json"
					});
				},
				"Cancelar": function() {
					$( this ).dialog( "close" );
				}
			}
		});
});
</script>
<!-- END BLOCK : AGREGARALUMNO -->
<!-- START BLOCK : SINRESULTADOS -->
<h3>No se encontraron resultados</h3>
<!-- END BLOCK : SINRESULTADOS -->